<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>权限管理系统登陆</title>
		<!-- Tell the browser to be responsive to screen width -->
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
		<!-- Bootstrap 3.3.7 -->
		<link rel="stylesheet" href="/static/bower_components/bootstrap/dist/css/bootstrap.min.css">
		<!-- Font Awesome -->
		<link rel="stylesheet" href="/static/bower_components/font-awesome/css/font-awesome.min.css">
		<!-- Ionicons -->
		<link rel="stylesheet" href="/static/bower_components/Ionicons/css/ionicons.min.css">
		<!-- Theme style -->
		<link rel="stylesheet" href="/static/dist/css/AdminLTE.min.css">
		<!-- iCheck -->
		<link rel="stylesheet" href="/static/plugins/iCheck/square/blue.css">
		<style type="text/css">
				.login-box-body {
				padding: {
					40px 50px;
				}
				#mylogin {
					padding: 20px 10px;
				}
		</style>

		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

		<!-- Google Font -->
		<!--<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">-->
	</head>

	<body class="hold-transition login-page">
		<div class="login-box">
			<div class="login-logo">
				<b>用户权限管理系统</b>
			</div>
			<!-- /.login-logo -->
			<div class="login-box-body">

				<h3 class="login-box-msg">用户登陆</h3>

				<form id="mylogin" method="post">
					<div class="form-group has-feedback">
						<input type="text" class="form-control" placeholder="用户名" name="username" id="username" autofocus="autofocus">
						<span class="glyphicon glyphicon-user form-control-feedback"></span>
					</div>
					<!--<div class="form-group has-feedback">
						<input type="email" class="form-control" placeholder="Email" name="email" id="email">
						<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
					</div>-->
					<div class="form-group has-feedback">
						<input type="password" class="form-control" placeholder="密码" name="password" id="password">
						<span class="glyphicon glyphicon-lock form-control-feedback"></span>
					</div>
					<div class="row">
						<div class="col-xs-8">
							<button type="button" id="selpsw" class='btn' style="background-color: white;" data-btn-type='window' data-toggle="modal">忘记密码</button>
						</div>
						<!-- /.col -->
						<div class="col-xs-4">
							<button type="submit" class="btn btn-primary btn-block btn-flat">登 陆</button>
						</div>
						<!-- /.col -->
					</div>
				</form>
				<!-- /.social-auth-links -->

			</div>
			<!-- /.login-box-body -->
		</div>
		<!-- /.login-box -->

		<!-- jQuery 3 -->
		<script src="/static/bower_components/jquery/dist/jquery.min.js"></script>
		<!-- Bootstrap 3.3.7 -->
		<script src="/static/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
		<!-- iCheck -->
		<script src="/static/plugins/iCheck/icheck.min.js"></script>
		<script src="/static/bower_components/bootstrap-validator/dist/js/bootstrapValidator.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/bower_components/bootstrap-validator/dist/js/language/zh_CN.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/dist/js/adminlte.min.js"></script>
		<script src="../static/dist/js/demo.js"></script>
		<script src="../static/common/js/base-modal.js" type="text/javascript" charset="utf-8"></script>

		<script>
			$(function() {
				$("#selpsw").click(function() {
					modals.openWin({
						winId: 'userWin',
						title: '找回密码',
						width: '500px',
						url: "/password/select"
					});
				});
				document.onkeypress = function(ev) {
					var inputs = $("input");
					//					console.log($inputs)
					var oEvent = ev || event; //处理兼容
					if(oEvent.keyCode == 13) {
						for(var i = 0; i < inputs.length; i++) {
							if(inputs[i] == document.activeElement) {
								i++;
								if(i == 3) {
									i = 0;
								}
								$(inputs[i]).focus();
							}
						}
					}
				}
				$('#mylogin').bootstrapValidator({
					message: 'This value is not valid',
					feedbackIcons: {
						valid: 'glyphicon glyphicon-ok',
						invalid: 'glyphicon glyphicon-remove',
						validating: 'glyphicon glyphicon-refresh'
					},
					fields: {
						username: {
							validators: {
								notEmpty: {},
								different: {
									field: 'password'
								}
							}
						},
						password: {
							validators: {
								notEmpty: {},
								identical: {
									field: 'confirmPassword',
								},
								different: {
									field: 'username'
								}
							}
						},
						remember: {
							validators: {
								notEmpty: {}
							}
						}
					}
				}).on('success.form.bv', function(e) {
					//阻止默认动作，禁止表单提交
					e.preventDefault();
					var username = $("#username").val();
					//					sessionStorage.setItem('user', username); 
					$.ajax({
						url: "/login",
						method: "post",
						data: {
							username: $("#username").val(),
							//							email: $("#email").val(),
							psw: $("#password").val()
						},
						success: function(data) {
							//							console.log(data);
							var data = JSON.parse(data);
							var name = data[0]['UserName'];
							//							var img = data[0]['Image'];
							if(name != '') {
								sessionStorage.setItem("user", name);
								location.href = "/home";
							} else {
								$(".login-box-msg").html("data.message");
							}
						},
						error: function(er) {
							console.log(er);
						}
					});
					$.ajax({
						type: "post",
						url: "/menu",
						data: {
							username: username
						},
						success: function(data) {
							sessionStorage.setItem('MenuCount', data); 
							//							console.log(data);
						},
						error: function(er) {
							console.log(er);
						}
					});
					
				});
			});
		</script>
	</body>

</html>